import React, { useEffect, useState } from 'react'
import '../components/menue.min.css'
import { RouterItem, RouterType } from '../e'
import routerList, { routerChildren } from '../router/Routerconfig'
type Props = {}

const Menue = (props: Props) => {
  const [url, setUrl] = useState<string>()
  const [height1,setHeight1]=useState<string>('0px')
const [deg,setDeg]=useState<number>(0)
  useEffect(() => {
    console.log(window.location.hash.slice(1));
    setUrl(window.location.hash.slice(1))

  }, [url])
  const hashChange = (path: string) => {
    window.location.hash = path
    setUrl(path)
  }
  const onShow=()=>{
    setHeight1(height1=='90px'?"0px":"90px")
    setDeg(deg==180?0:180)
  }

  return (
    <div className='menue'>
      {
        routerChildren.map((i: RouterType, j) => {
          // 监听hashchange
          return <div key={j} className='asside'>
            <h4>{i.type}</h4>
            <div>
              {
                i.children.map((s, y) => {
                  return <div key={y} >
                    <div onClick={() => { hashChange(s.path) }} className={url == s.path ? "active menue" : "menue"}>
                      <i className={'iconfont icon-' + s.icon}></i>
                      <span>{s.title}</span>                                                                                              
                      <b>{s.span}</b>
                      <em onClick={onShow} style={{ transform:`rotate(${deg}deg)`,transition:"all 1s", transformOrigin:"center"}} className={s.cid&&'iconfont icon-jiantou_liebiaozhankai'} >
                      </em>
                    </div>
                    {
                      s.cid && <div className='menueChild' style={{height:height1}} >
                      { s.cid.map((a, b) => {
                        return <p  key={b} onClick={() => { hashChange(a.path) }} className={url == a.path ? "active menue" : "menue"}>{a.title}</p>
                      })}
                    </div>
                    }
                   
                  </div>
                })
              }

            </div>
          </div>
        })
      }
    </div>
  )
}

export default Menue

{/* <div className="child">
                    
                    {/* {
                      routerChildren.map((i, j) => {
                        return i.children.map((a, b) => {
                          return a.cid && a.cid.map((c, d) => {
                            return <p>{c.title}</p>
                          })
                          // return 
                        })
                      })
                    } 
                      
                              </div > 
                    */}
